<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家居</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    .A {
        width: 1000px;
        height: 600px;
        background-color: #dbf6e9;
        position: relative;
        margin: 100px 150px 100px 285px;
    }
    
    .B {
        position: absolute;
        right: 50px;
        top: 60px;
        margin-right: 25px;
        margin-left: 30px;
    }
    
    .a {
        position: absolute;
        z-index: 2;
        left: 295px;
        top: 170px;
        box-shadow: 6px 6px 6px rgb(171, 194, 191);
    }
    
    .c {
        position: absolute;
        z-index: 3;
        bottom: 120px;
        left: 618px;
        box-shadow: 6px 6px 6px rgb(171, 194, 191);
    }
    
    .btn {
        position: absolute;
        width: 120px;
        height: 20px;
        border: 3px solid #b6e7d9;
        bottom: 30px;
        left: 20px;
        z-index: 4;
        text-align: center;
        color: #8db596;
    }
    
    .D {
        position: absolute;
        left: 800PX;
        top: 130px;
        z-index: 1;
    }
    
    h3 {
        display: inline-block;
        position: absolute;
        bottom: 120px;
        left: 20px;
        z-index: 4;
        color: #8db596;
    }
    
    h4 {
        display: inline-block;
        position: absolute;
        top: 120px;
        right: 190px;
        z-index: 7;
        color: #6fb98f;
    }
    
    p1 {
        position: absolute;
        z-index: 5;
        bottom: 70px;
        left: 20px;
        color: #8db596;
    }
    
    p2 {
        position: absolute;
        z-index: 6;
        top: 180px;
        left: 70px;
        color: white;
    }
    
    .box {
        position: absolute;
        width: 120px;
        height: 25px;
        background-color: white;
        bottom: 30px;
        top: 280px;
        left: 70px;
        color: #6fb98f;
        text-align: center;
    }
</style>




<body>

    <div class="container">
        <div class="A">
            <div class="B"> <img src="1.jpg" width="850px" height="470px"></div>
            <div class="a"> <img src="2.png" width="250PX" height="250PX"></div>


        </div>
        <div class="c"> <img src="3.jpg" width="270PX" height="180PX">
            <h3> DESING </h3>
            <P1>For one thing, as they are the backbones of have to work overtime. </P1>
            <div class="btn">CONTACY ME</div>

        </div>

    </div>
    <div class="D">
        <img src="4.jpg" width="350PX" height="455PX">
        <h4>LIFE HOME</h4>
        <P2>For another, they have to
            <br>take great responsibilities
            <br> need to be supported</P2>
        <div class="box">LIFE VEGUE</div>

    </div>


    </div>


    </div>









</body>

</html>